<!-- 书架列表组件 -->
<template>
  <div class="shelf-list" :style="{ top: shelfListTop }">
    <transition-group name="list" tag="div" id="shelf-list">
      <div class="shelf-list-item-wrapper" v-for="item in bookData" :key="item.id">
        <shelf-item :data="item" :style="{ height: itemHeight }"></shelf-item>
        <div class="shelf-list-title-wrapper">
          <div class="shelf-list-title title-small">{{ item.title }}</div>
        </div>
      </div>
    </transition-group>
    <div class="store-shelf-statistics" v-show="!isInputMode">
      {{
        $t("shelf.statistic")
          .replace("$1", publicNumber)
          .replace("$2", privateNumber)
      }}
    </div>
  </div>
</template>

<script>
import { storeShelfMixin } from '../../utils/mixin'
import { realPx, px2rem } from '../../utils/utils'
import ShelfItem from './ShelfItem'
import { flatBookList } from '../../utils/store'

export default {
  mixins: [storeShelfMixin],
  components: {
    ShelfItem
  },
  props: {
    top: {
      type: Number,
      default: 94
    },
    data: Array
  },
  computed: {
    // 搜索模式下 书籍的显示
    bookData() {
      if (!this.isInputMode) {
        return this.data
      } else {
        // 点击搜索 书籍展开
        return flatBookList(this.data)
      }
    },
    shelfListTop() {
      return px2rem(this.top) + 'rem'
    },
    itemHeight() {
      // h = w * 350 / 250
      // 书籍封面的宽高比
      // 高度自适应计算
      return ((window.innerWidth - realPx(120)) / 3) / 250 * 350 + 'px'
    },
    // 计算公开阅读书籍数量
    publicNumber() {
      if (this.data) {
        // 书架中有书籍
        let number = 0
        this.data.filter(item => {
          if (!item.private && item.type === 1) {
            // 书籍的公开阅读
            number++
          } else if (item.type === 2 && item.itemList.length > 0) {
            // 组合里的书籍公开阅读
            number += item.itemList.filter(subItem => {
              return !subItem.private && subItem.type === 1
            }).length
          }
        })
        return number
      } else {
        return 0
      }
    },
    // 计算私密阅读书籍数量
    privateNumber() {
      if (this.data) {
        let number = 0
        this.data.filter(item => {
          if (item.private && item.type === 1) {
            // 书籍的公开阅读
            number++
          } else if (item.type === 2 && item.itemList.length > 0) {
            // 组合里的书籍公开阅读
            number += item.itemList.filter(subItem => {
              return subItem.private && subItem.type === 1
            }).length
          }
        })
        return number
      } else {
        return 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/global";

.shelf-list {
  position: absolute;
  left: 0;
  z-index: 100;
  width: 100%;
  #shelf-list {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    padding: 0 px2rem(15);
    box-sizing: border-box;
    .shelf-list-item-wrapper {
      flex: 0 0 33.33%;
      width: 33.33%;
      padding: px2rem(15);
      box-sizing: border-box;
      &.list-leave-active {
        display: none;
      }
      &.list-move {
        transition: transform 0.5s;
      }
      .shelf-list-title-wrapper {
        margin-top: px2rem(10);
      }
    }
  }
  .store-shelf-statistics {
    margin: px2rem(20) 0 px2rem(20) 0;
    text-align: center;
    font-size: px2rem(12);
    color: #999;
  }
}
</style>
